CSS 顏色、模糊效果 filter屬性


Posted by mijouhsieh on 2023-12-17

1 filter

filter property MDN

Image Filters W3S

CODEPEN LINK


filter: 使圖形元素(圖案、背景、邊框) 模糊顏色偏移的效果。

SVG filter

url()

/* URL to SVG filter */
filter: url("filters.svg#filter-id");

Filter 函数 /* <filter-function> values */

  • 高斯模糊 filter: blur(5px);
    blur - default: 0,不接受%。

  • 明亮度 filter: brightness(0.4);
    brightness - default: 1,0% 全黑、100%(= 1) 不變明亮度、> 100% 增加明亮度。

  • 對比度 filter: contrast(200%);
    contrast - default: 1,0% 全黑、100%(=1) 不變對比度、> 100% 增加對比度。
    filter-contrast.png

  • 圖案陰影效果 filter: drop-shadow(16px 16px 20px blue);
    drop-shadow(<offset-x>必 <offset-y>必 <blur-radius>選 <color>選)
    • 陰影偏移<offset-x> <offset-y> (必須)
    • <offset-x>水平偏移,正值陰影在右。<offset-y>垂直偏移,正值陰影在下。
    • <blur-radius> (選)
      值越大,越模糊,所以陰影可以變得更大或更淡。
      不允許負值。 default: 0(陰影的邊界很銳利)。
    • <color> (選)

filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Multiple filters */
filter: contrast(175%) brightness(3%);

/* Use no filter */
filter: none;

/* Global values */
filter: inherit;
filter: initial;
filter: revert;
filter: unset;

2 backdrop-filter

backdrop-filter

codepen backdrop-filter blur

button:active,
button:hover {
  backdrop-filter: blur(10px);
}

#filter #backdrop-filter #模糊 #filter: blur







Related Posts

[ JavaScript 08 ] Number 類型的內建函式

[ JavaScript 08 ] Number 類型的內建函式

DAY 06 : 樹

DAY 06 : 樹

關於 React 小書:渲染陣列裡的各個項目

關於 React 小書:渲染陣列裡的各個項目


Comments